﻿<template>
    <div class="attr-box" @click="stopPropagation">
        <p>【TEXT】</p>

        <div style="margin-top: 50px">
            <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
                <el-form-item label="文本内容" prop="val">
                    <el-input v-model="form.val" @input="onInput" />
                </el-form-item>
            </el-form>

            <el-button type="danger" @click="removeAttr">删除</el-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue';

const { schema } = defineProps({
    schema: Object,
});

const $emits = defineEmits(['removeAttr', 'updateAttr']);

const formRef = ref(null);
const form = reactive({
    val: '',
});

const initData = () => {
    form.val = schema.val;
};

watch(
    () => schema,
    () => {
        initData();
    },
    { deep: true, immediate: true }
);

// 属性栏的值发生变化
const onInput = val => {
    $emits('updateAttr', { val, id: schema.id });
};

// 删除
const removeAttr = () => {
    $emits('removeAttr', schema.id);
};

const stopPropagation = e => {
    e.stopPropagation();
};
const rules = {};
</script>

<style scoped lang="scss">
.attr-box {
    box-shadow: 0px 4px 15px 0px rgba(100, 123, 189, 0.16);
    padding: 20px;
}
</style>
